<template>
    <page-view>
        <page-header title="购物车" :showBack="true"></page-header>
        <div class="content-box">
            <tabs v-model:active="tabIndex" animated>
                <tab title="购物车列表" >
                   <list
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    >
                    <cell v-for="item in shopCarList" :key="item" :title="item" />
                    </list>
                    <swipe-cell>
                    <card
                        num="2"
                        price="2.00"
                        desc="描述信息"
                        title="商品标题"
                        class="goods-card"
                        thumb="*"
                    />
                    <template #right>
                        <button square text="删除" type="danger" class="delete-button" />
                    </template>
                    </swipe-cell>
                </tab>
                <tab title="收货地址" >
                    内容 2
                </tab>
            </tabs>
        </div>
    </page-view>
</template>

<script>
import PageHeader from '../components/PageHeader.vue'
import { Toast, Tab, Tabs,List,SwipeCell,Card,Button,Stepper    } from 'vant'
import { reactive,toRefs } from 'vue'
export default {
  components: { PageHeader,Tab, Tabs,List ,SwipeCell,Card,Button,Stepper  },
    setup () {
        let info=reactive({
            tabIndex:0,
            loading:false

        })

        return {...toRefs(info)}
    }
}
</script>

<style lang="scss" scoped>
 .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }
</style>